<template>
  <p-form-model
    ref="ruleForm"
    layout="inline"
    :model="matterForm"
    :rules="rules"
  >
    <div class="connect">
      <div class="connect_form">
        <p-form-model-item label="线索" style="width: 100%">
          <p-select
            v-if="state === '0' && !isEdit"
            v-model="matterForm.leadsName"
            class="default-select-container"
            @change="handleChange"
          >
            <p-select-option value="">请选择</p-select-option>
            <!-- prettier-ignore -->
            <p-select-option
              v-for="item in selectCur"
              :key="item.leadsNo"
              :value="item.leadsName"
            >{{ item.leadsName }}</p-select-option>
          </p-select>
          <span v-if="isEdit || state !== '0'">
            {{ matterForm.leadsName }}
          </span>
        </p-form-model-item>
      </div>
      <div class="connect_form">
        <p-form-model-item label="商机" style="width: 100%">
          <p-select
            v-if="state === '0' && !isEdit"
            v-model="matterForm.opportunityName"
            class="default-select-container"
            @change="handleChange1"
          >
            <p-select-option value="">请选择</p-select-option>
            <!-- prettier-ignore -->
            <p-select-option
              v-for="item in selectBusiness"
              :key="item.opportunityNo"
              :value="item.opportunityName"
            >{{ item.opportunityName }}</p-select-option>
          </p-select>
          <span v-if="isEdit || state !== '0'">
            {{ matterForm.opportunityName }}
          </span>
        </p-form-model-item>
      </div>
    </div>
    <p-form-model-item label="主题" prop="topic" class="remark">
      <p-textarea
        v-if="state === '0' && !isEdit"
        v-model="matterForm.topic"
        style="height: 30px; width: 97.5%; resize: none"
      />
      <span v-if="isEdit || state !== '0'">{{ matterForm.topic }}</span>
    </p-form-model-item>
    <div class="connect">
      <div class="connect_form">
        <p-form-model-item
          label="处理人"
          prop="currentUser"
          style="width: 100%"
        >
          <SelectSearchPeople
            v-if="state === '0' && !isEdit"
            ref="search"
            :value="matterForm.currentUser"
            label-in-value
            @select="handleChangeSelect"
            @deselect="handleDeselect"
          />
          <span v-if="isEdit || state !== '0'">
            {{
              matterForm.currentUser.length
                ? matterForm.currentUser[0].label
                : ''
            }}
          </span>
        </p-form-model-item>
      </div>
      <div class="connect_form">
        <p-form-model-item label="处理人部门" style="width: 100%">
          <span>{{ matterForm.currentDepartmentName }}</span>
        </p-form-model-item>
      </div>
    </div>
    <p-form-model-item label="详情" prop="remark" class="isremark">
      <p-textarea
        v-if="state === '0' && !isEdit"
        v-model="matterForm.remark"
        style="height: 60px; width: 97.5%; resize: none"
      />
      <span v-if="isEdit || state !== '0'">{{ matterForm.remark }}</span>
    </p-form-model-item>
    <!-- <div class="container">
      <BottomLine />
    </div> -->
    <DialogUserList :visible.sync="visibleCustomer" @change="changeCustomer" />
  </p-form-model>
</template>

<script>
import DialogUserList from '@/components/dialog/DialogUserList.vue';
import { getUserOrganization } from '@/api/public.js';
import { getMyList } from '@/api/visit.js';
import monent from 'moment';

export default {
  components: {
    DialogUserList,
  },
  props: {
    matterForm: {
      type: Object,
      default: () => ({}),
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    isFoot: {
      type: Boolean,
      default: false,
    },
    deleteFileId: {
      type: Array,
      default: () => [],
    },
    selectCur: {
      type: Array,
      default: () => [],
    },
    selectBusiness: {
      type: Array,
      default: () => [],
    },
    state: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      headers: {
        authorization: 'authorization-text',
      },
      value: '',
      isload: false,
      orgGroupOptions: [],
      fileList: [],
      list: [],
      customerName: '',
      dataSource: [],
      visibleLegalNo: false,
      parentId: '',
      hasAll: false,
      visibleCustomer: false,
      visibleOpportunity: false,
      visibleModelName: false,
      isDetail: false,
      updateUserGroup: '',
      rules: {
        topic: [
          { required: true, message: '请输入事项主题', trigger: 'blur' },
          { max: 200, message: '输入的内容过长', trigger: 'blur' },
        ],
        currentUser: [
          { required: true, message: '请输入选择处理人', trigger: 'blur' },
        ],
        remark: [{ max: 1000, message: '输入的内容过长', trigger: 'blur' }],
      },
    };
  },
  computed: {
    orgOptions() {
      return this.$store.getters.getOrg({
        code: 'ltcsmsizebu',
      });
    },
    appOptions() {
      return this.$store.state.dictionary.dict['application'] || {};
    },
  },
  watch: {},
  created() {},
  methods: {
    validate() {
      return new Promise((resolve) => {
        this.$refs.ruleForm.validate((valid) => {
          resolve(valid);
        });
      });
    },
    handleDeselect() {
      this.matterForm.currentUser = [];
    },
    getCaption(obj) {
      const index = obj.lastIndexOf('-');
      obj = obj.substring(0, index);
      return obj;
    },
    async handleChangeSelect(val) {
      this.matterForm.currentUser = [val];
      if (this.matterForm.currentUser[0].label.indexOf('-') !== -1) {
        this.matterForm.currentUser[0].label = this.getCaption(
          this.matterForm.currentUser[0].label
        );
      }
      const params = {
        keyword: val.key,
        tenantId: 'geek',
        pageNo: 1,
        limit: 100,
      };
      const result = await getMyList(params);
      const org = result?.data?.data?.records[0].departmentName || '';
      this.matterForm.currentDepartmentName = this.removalSame(org);
      console.log('this.removalSame(org): ', this.removalSame(org));
      // this.matterForm.currentDepartmentCode = org[0].orgCode;
      this.matterForm.tel = result?.data?.data?.mobile;
      this.$refs.search && this.$refs.search.clear();
    },
    removalSame(obj) {
      obj = obj.replace(/\s*/g, '');
      const array = obj.split(',');
      const departmentName = [...new Set(array)].join(',');
      return departmentName;
    },
    handleChange(value, key) {
      this.matterForm.leadsNo = key.key;
    },
    handleChange1(value, key) {
      this.matterForm.opportunityNo = key.key;
    },
    changeCustomer(val) {
      this.form.customerName = val?.label || '';
    },
    upLoad() {
      this.$refs.upload?.uploader();
    },

    disabledDate(val) {
      return monent().endOf('day').subtract(1, 'day').valueOf() > val.valueOf();
    },

    handleDeadLineChange(value) {
      const formatTime = monent(value).format('YYYY-MM-DD HH:mm:ss');
      this.form.visitTime = formatTime;
    },
  },
};
</script>
<style lang="less" scoped>
.connect {
  width: 100%;

  display: flex;
  justify-content: center;
}
.connect2 {
  margin-top: 10px;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
}
.connect_form {
  width: 49%;
  height: 100%;
  display: inline-block;
}
// .from-input {
//   width: 320%;
// }
.row {
  margin-top: 20px;
}
/deep/ .poros-form-item {
  margin-bottom: 20px;
  height: 30px;
}
/deep/ .poros-form-item-label {
  width: 90px !important;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 250px);
}
.load {
  margin-top: 50px !important;
}
.form-item {
  position: relative;
  .copy-clue {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(110%, -25%);
  }
  .searchIcon {
    position: absolute;
    top: 0;
    right: 5px;
  }
}
.disinput {
  background-color: #fff;
  cursor: default;
  color: #000;
  width: 85%;
  margin-right: 2%;
}
.isremark {
  width: 100%;
  margin-left: 12px;
  height: 60px;
}
.remark {
  width: 100%;
  margin-left: 12px;
  height: 30px;
}
// /deep/ .poros-upload-list {
//   display: inline-block;
// }
/deep/ .poros-upload-list-item {
  margin-left: 100px;
}
/deep/ .anticon {
  margin-left: 5px;
}
.container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  position: relative;
  box-sizing: border-box;
  padding: 10px 24px;
  margin-top: 40px;
}
</style>
